<template>
  <div class="traceability-container">
    <!-- 顶部产品信息卡片 -->
    <div class="header">
      <img :src="details?.CoverImageUrl || defaultImg" class="product-img" alt="商品图片" />
      <div class="product-title">{{ details?.FoodcommoditiesName || '-' }}</div>
      <div class="product-meta">
        <div>批次号：{{ details?.BatchNumber || '-' }}</div>
        <div>保质期：{{ details?.ShelfLifeDays || '-' }} 天</div>
        <div>生产许可证：{{ details?.ProductionLicense || '-' }}</div>
        <div>生产企业：{{ details?.Manufacturer || '-' }}</div>
      </div>
    </div>

    <!-- 产品检验报告 -->
    <el-card class="info-card">
      <template #header>产品检验报告</template>
      <template v-if="inspectionImages.length">
        <div class="img-list">
          <el-image v-for="(img, idx) in inspectionImages" :key="img.url" :src="img.url" fit="cover" :preview-src-list="inspectionImages.map(i=>i.url)" :initial-index="idx" class="report-img" />
        </div>
      </template>
      <div v-else class="empty-info">暂无图片</div>
    </el-card>

    <!-- 养殖信息 -->
    <el-card class="info-card">
      <template #header>养殖信息</template>
      <div v-if="aquacultureInfo" class="info-grid">
        <div class="info-item"><span>品种：</span>{{ aquacultureInfo.Breed || '-' }}</div>
        <div class="info-item"><span>来源：</span>{{ aquacultureInfo.Source || '-' }}</div>
        <div class="info-item"><span>饲养天数：</span>{{ aquacultureInfo.FeedingDays || '-' }} 天</div>
        <div class="info-item"><span>饲料品牌：</span>{{ aquacultureInfo.FeedBrand || '-' }}</div>
        <div class="info-item"><span>负责人：</span>{{ aquacultureInfo.ResponsiblePerson || '-' }}</div>
        <div class="info-item"><span>出栏日期：</span>{{ aquacultureInfo.OutDate || '-' }}</div>
      </div>
      <div v-else class="empty-info">暂无信息</div>
      <template v-if="breedingImages.length">
        <div class="img-list">
          <el-image v-for="(img, idx) in breedingImages" :key="img.url" :src="img.url" fit="cover" :preview-src-list="breedingImages.map(i=>i.url)" :initial-index="idx" class="report-img" />
        </div>
      </template>
      <div v-else class="empty-info">暂无图片</div>
    </el-card>

    <!-- 屠宰信息 -->
    <el-card class="info-card">
      <template #header>屠宰信息</template>
      <div v-if="slaughterInfo" class="info-grid">
        <div class="info-item"><span>屠宰批次：</span>{{ slaughterInfo.BatchNo || '-' }}</div>
        <div class="info-item"><span>平均重量：</span>{{ slaughterInfo.AvgWeight || '-' }}</div>
        <div class="info-item"><span>到达时间：</span>{{ slaughterInfo.ArriveTime || '-' }}</div>
        <div class="info-item"><span>屠宰时间：</span>{{ slaughterInfo.SlaughterTime || '-' }}</div>
      </div>
      <div v-else class="empty-info">暂无信息</div>
      <template v-if="slaughterImages.length">
        <div class="img-list">
          <el-image v-for="(img, idx) in slaughterImages" :key="img.url" :src="img.url" fit="cover" :preview-src-list="slaughterImages.map(i=>i.url)" :initial-index="idx" class="report-img" />
        </div>
      </template>
      <div v-else class="empty-info">暂无图片</div>
    </el-card>

    <!-- 深加工信息 -->
    <el-card class="info-card">
      <template #header>深加工信息</template>
      <div v-if="processingInfo" class="info-grid">
        <div class="info-item"><span>班组：</span>{{ processingInfo.GroupName || '-' }}</div>
        <div class="info-item"><span>负责人：</span>{{ processingInfo.ResponsiblePerson || '-' }}</div>
        <div class="info-item"><span>食品安全：</span>{{ processingInfo.Food_safety || '-' }}</div>
      </div>
      <div v-else class="empty-info">暂无信息</div>
      <template v-if="processingImages.length">
        <div class="img-list">
          <el-image v-for="(img, idx) in processingImages" :key="img.url" :src="img.url" fit="cover" :preview-src-list="processingImages.map(i=>i.url)" :initial-index="idx" class="report-img" />
        </div>
      </template>
      <div v-else class="empty-info">暂无图片</div>
    </el-card>

    <!-- 企业信息 -->
    <el-card class="info-card">
      <template #header>企业信息</template>
      <div v-if="enterpriseInfo" class="info-grid">
        <div class="info-item"><span>养殖场：</span>{{ enterpriseInfo.Breeding_farm || '-' }}</div>
        <div class="info-item"><span>负责人：</span>{{ enterpriseInfo.Person_in_charge || '-' }}</div>
        <div class="info-item"><span>存栏数量：</span>{{ enterpriseInfo.Numberbooksstock || '-' }}</div>
      </div>
      <div v-else class="empty-info">暂无信息</div>
    </el-card>

    <!-- 供应商信息 -->
    <el-card class="info-card">
      <template #header>供应商信息</template>
      <div v-if="supplyInfo" class="info-grid">
        <div class="info-item"><span>原料：</span>{{ supplyInfo.Raw_materials || '-' }}</div>
        <div class="info-item"><span>辅料：</span>{{ supplyInfo.Auxiliary_materials || '-' }}</div>
        <div class="info-item"><span>添加剂：</span>{{ supplyInfo.Additive || '-' }}</div>
        <div class="info-item"><span>包装材料：</span>{{ supplyInfo.Packaging_materials || '-' }}</div>
      </div>
      <div v-else class="empty-info">暂无信息</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { CommodityInfoRead } from '@/utils/axionrequest'
const route = useRoute()
const defaultImg = '/logo.png'
const details = ref<any>(null)
const inspectionImages = ref<any[]>([])
const aquacultureInfo = ref<any>(null)
const enterpriseInfo = ref<any>(null)
const slaughterInfo = ref<any>(null)
const processingInfo = ref<any>(null)
const supplyInfo = ref<any>(null)
const breedingImages = ref<any[]>([])
const slaughterImages = ref<any[]>([])
const processingImages = ref<any[]>([])

const getFullImageUrl = (url: string) => {
  if (!url) return ''
  return url.startsWith('http') ? url : `http://10.222.11.13:8094${url}`
}

onMounted(async () => {
  const commodityId = route.query.id
  if (!commodityId) return
  // 商品详情
  const res = await CommodityInfoRead.get('/api/Commodity/SearchDetails', { params: { CommodityId: commodityId } })
  if (res.data.code === 200 && res.data.data.length > 0) {
    details.value = res.data.data[0]
    // 检验报告图片
    if (details.value.Inspectionreport) {
      inspectionImages.value = details.value.Inspectionreport.split(',').filter(Boolean).map((url: string) => ({ url: getFullImageUrl(url) }))
    }
    // 养殖信息
    const aquRes = await CommodityInfoRead.get('/api/Aquaculture/GetAquacultureByCommodityName', { params: { FoodcommoditiesId: details.value.FoodcommoditiesId } })
    if (aquRes.data.code === 200 && aquRes.data.data) {
      aquacultureInfo.value = aquRes.data.data
      // 养殖图片
      if (aquacultureInfo.value.BreedingImages) {
        breedingImages.value = aquacultureInfo.value.BreedingImages.split(',').filter(Boolean).map((url: string) => ({ url: getFullImageUrl(url) }))
      }
    }
    // 屠宰信息
    if (aquacultureInfo.value?.AquacultureId) {
      const slRes = await CommodityInfoRead.get('/api/Slaughter/GetSlaughterByAquacultureId', { params: { AquacultureId: aquacultureInfo.value.AquacultureId } })
      if (slRes.data.code === 200 && slRes.data.data) {
        slaughterInfo.value = slRes.data.data
        // 屠宰图片
        if (slaughterInfo.value.SlaughterImages) {
          slaughterImages.value = slaughterInfo.value.SlaughterImages.split(',').filter(Boolean).map((url: string) => ({ url: getFullImageUrl(url) }))
        }
        // 深加工信息
        if (slaughterInfo.value?.SlaughterId) {
          const prRes = await CommodityInfoRead.get('/api/Processing/GetProcessingInfoBySlaughterId', { params: { SlaughterId: slaughterInfo.value.SlaughterId } })
          if (prRes.data.code === 200 && prRes.data.data) {
            processingInfo.value = prRes.data.data
            // 深加工图片
            if (processingInfo.value.ProcessingImages) {
              processingImages.value = processingInfo.value.ProcessingImages.split(',').filter(Boolean).map((url: string) => ({ url: getFullImageUrl(url) }))
            }
            // 供应商信息
            if (processingInfo.value?.ProcessingID) {
              const suRes = await CommodityInfoRead.get('/api/Processing/GetSupplyofgoodsByProcessingId', { params: { ProcessingID: processingInfo.value.ProcessingID } })
              if (suRes.data.code === 200 && suRes.data.data) supplyInfo.value = suRes.data.data
            }
          }
        }
      }
    }
    // 企业信息
    if (aquacultureInfo.value?.AquacultureId) {
      const entRes = await CommodityInfoRead.get('/api/Aquaculture/GetEnterpriseInfoByAquacultureId', { params: { AquacultureId: aquacultureInfo.value.AquacultureId } })
      if (entRes.data.code === 200 && entRes.data.data) enterpriseInfo.value = entRes.data.data
    }
  }
})
</script>

<style scoped>
.traceability-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px;
  background: #f7f8fa;
  min-height: 100vh;
}
.header {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 20px 12px 12px 12px;
  margin-bottom: 16px;
  text-align: center;
}
.product-img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 8px;
}
.product-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}
.product-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}
.info-card {
  margin-bottom: 14px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  flex-direction: row;
  justify-content: space-between;
}
.info-item {
  width: 48%;
  font-size: 15px;
  color: #333;
  padding: 4px 0;
  background: #f5f7fa;
  border-radius: 6px;
  margin-bottom: 4px;
  box-sizing: border-box;
  padding-left: 8px;
}
.img-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.report-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #eee;
}
.empty-info {
  color: #bbb;
  text-align: center;
  padding: 16px 0 8px 0;
  font-size: 15px;
}
@media (max-width: 600px) {
  .traceability-container {
    padding: 2px;
  }
  .header {
    padding: 10px 2px 8px 2px;
  }
  .product-img {
    width: 90px;
    height: 90px;
  }
  .info-card {
    margin-bottom: 8px;
    border-radius: 10px;
  }
  .info-item {
    font-size: 13px;
    padding-left: 4px;
  }
  .report-img {
    width: 60px;
    height: 60px;
  }
}
</style> 